<template>
	<view class="c_container">
		<view class="b_header">
			<view class="qh_box">
				<!-- <view class="q_box">
					<text class="b_name">姓名：</text>
					<text class="b_name_txt">{{realName}}</text>
				</view>
				<view class="q_box">
					<text class="b_name">身份证：</text>
					<text class="b_name_txt">{{idCard}}</text>
				</view> -->
				学生信息
			</view>
		</view>
		<view class="bac_box"></view>
		<!-- <tabRaduis :tabs="tabs" :active="activeIndex" @change="changeTab"></tabRaduis> -->
		<view v-if="activeIndex === 0" class="in_boxs">
			<view class="input_box">
				<view class="sel_box">
					<!-- <view class="lab_txt">绑卡方式</view>
					<view class="radio_box">
						<radio-group class="radio_box" @change="radioChange">
							<label class="radioTxt" v-for="(item, index) in radioList" :key="item.value">
								<radio color="#4874FA" style="transform: scale(0.68);" :value="item.value"
									:checked="index === current" />
								<text>{{item.name}}</text>
							</label>
						</radio-group>
					</view> -->
				</view>
				<!-- 		<view v-if="selCard == 0">
					<view class="in_box" @click="()=>{showOrg = true}">
						<text class="orgTxt">机构<text></text></text>
						<!-- #ifndef MP-ALIPAY -->
				<input style="flex: 1;" v-model="orgName" :disabled="true" type="text"
					placeholder-class="account-txt" class="uni-input" placeholder="请输入机构名称" />
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<input style="flex: 1;" v-model="orgName" type="text" placeholder-class="account-txt"
					class="uni-input" placeholder="请输入机构名称" />
				<!-- #endif -->
			</view>
			<view class="in_box">
				<text class="orgTxt">姓名<text></text></text>
				<input style="flex: 1;" v-model="empName" type="text" placeholder-class="account-txt"
					class="uni-input" placeholder="请输入对应绑卡姓名" />
			</view>
			<view class="in_box">
				<text class="orgTxt">卡号<text></text></text>
				<input style="flex: 1;" @blur="carNoLen" v-model="cardNo" type="text"
					placeholder-class="account-txt" class="uni-input" placeholder="请输入个人卡号(校园卡/机关饭卡等)" />
			</view>
			<view class="in_box">
				<text class="orgTxt">密码<text></text></text>
				<view class="pwd-view input_view">
					<input v-if="showPassword" type="text" placeholder-class="account-txt" v-model="cardPwd"
						placeholder="请输入卡密码" />
					<!-- #ifndef MP-ALIPAY -->
					<input v-if="!showPassword" type="password" placeholder-class="account-txt"
						v-model="cardPwd" placeholder="请输入卡密码" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input v-if="!showPassword" password placeholder-class="account-txt" v-model="cardPwd"
						placeholder="请输入卡密码" />
					<!-- #endif -->
					<image @click="showPass"
						:src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'"
						class="eye_icon"></image>
				</view>
			</view>
		</view> -->
		<view>
			<view class="in_box" style="margin-bottom: 20rpx;" v-if="!isBlank">
				<text class="orgTxt">机构</text>
				<view class="secletInput" @tap="handleChangePupop">
					<view v-if="orgName" class="selectValue active">
						{{orgName}}
					</view>
					<view v-else class="selectValue">
						请选择机构
					</view>
				</view>
			</view>
			<view class="in_box" style="margin-bottom: 20rpx;">
				<text class="orgTxt">姓名</text>
				<input style="flex: 1;font-size: 30rpx;" v-model="empName" type="text"
					placeholder-class="account-txt" class="uni-input" placeholder="请输入对应绑卡姓名" />
			</view>
			<view class="in_box">
				<text class="orgTxt">身份证</text>
				<input style="flex: 1;font-size: 30rpx;" v-model="idCard" type="text"
					placeholder-class="account-txt" class="uni-input" placeholder="请输入身份证号码" />
			</view>

			<view style="height: calc(100vh - 480px); overflow: scroll;">
				<view v-if="isListShow"></view>
			</view>
		</view>
	</view>
	</view>
	<view class="btn_box">
		<button type="primary" class="btn_pri" @click="toBind">{{getName}}</button>
	</view>
	<popup-org-model title="请选择绑卡" :toForm="toForm" :only="only" ref="popupOrgModel" :batId="batId" :isBlank="isBlank"
		:orgId="orgId+''" :activeIndex="activeIndex" @getCardNo="getCardNo" :dataList="userList"
		v-model="showOrg1"></popup-org-model>
	<popup-org title="选择机构" ref="popupOrg" :parentId="parentId" @change="cliName"></popup-org>

	<!-- <view class="red_packet" :class="{'show_red_packet': showRedPacket}">
			<view class="red_packet_mask"></view>
			<view class="red_packet_box big_box">
				<image class="packet_box_bg" src="../../static/images/massage/pic.jpg" mode="scaleToFill">
				</image>
				<view class="red_packet_gold" :class="{'opening': opening}" @click="_getRedPacketHandle">
					開
				</view>
			</view>
			<view class="close_icon" @click="()=>{ showRedPacket = false}">
				<image class="icon" src="../../static/images/massage/add_circle.png" mode="scaleToFill"></image>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		queryOrg,
		bindEmp,
		queryStudentCardBalance,
		grabRedPacket,
		selectCardInfoByIdCardNo
	} from '../../common/api/index.js'
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import popupOrg from '../../components/custom-popup-org/custom-popup-school.vue'
	// import popupOrg from '../../components/custom-popup-org/custom-popup-org.vue'
	import popupOrgModel from '../../components/custom-popup-org/custom-popup-model.vue'
	import tabRaduis from '../../components/custom-tabs-radius/custom-tabs-radius.vue'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	import cardBox from '../../components/card-box1.vue'
	export default {
		data() {
			return {
				activeIndex: 0,
				cardNo: '',
				cardPwd: '',
				orgId: '4500001',
				orgName: '',
				isMore: false,
				showPassword: false,
				realName: uni.getStorageSync('realname'),
				idCard: "",
				jobIndex: 0,
				parentId: '',
				showOrg1: false,
				showMcModal: false,
				content: '',
				title: '',
				okBtn: '',
				isSwitch: false,
				showMcModal1: false,
				content1: '',
				title1: '',
				selCard: 1,
				selCard1: 1,
				showMcModal2: false,
				content2: '',
				title2: '',
				cardNo1: '',
				radioList: [{
						value: 1,
						name: '身份证绑定'
					},
					{
						value: 0,
						name: '个人卡号绑定'
					}
				],
				radioList1: [{
						value: 1,
						name: '身份证绑定'
					},
					{
						value: 0,
						name: '个人卡号绑定'
					}
				],
				current: 0,
				current1: 0,
				sfzCode: '',
				empName: '',
				userList: [],
				isListShow: true,
				isClick: false,
				isClick1: false,
				isBlank: false,
				batId: "",
				flag: true,
				toForm: '',
				only: false,
				showRedPacket: false,
				opening: false,
				profile: {}
			}
		},
		onLoad(option) {
			this.orgId = option.orgId
			this.empId = option.empId
			this.batId = option.batId
			this.toForm = option.toForm
			this.only = option.only
			if (typeof this.only == 'string') {
				if (this.only == 'true') {
					this.only = true
				} else if (this.only == 'false') {
					this.only = false
				}
			}
			if (option.isBlank) {
				this.isBlank = option.isBlank
			}
			uni.setNavigationBarTitle({
				title: '卡绑定'
			});
		},
		components: {
			tabRaduis,
			popupOrg,
			mcModal,
			tmcModal,
			cardBox,
			popupOrgModel
		},
		computed: {
			getName() {
				if (!this.flag) {
					return '重置信息'
				} else {
					return '查询'
				}
			},
			// getName1() {
			// 	if (this.isClick1) {
			// 		return '重置信息'
			// 	} else {
			// 		return this.selCard1 == 0 ? '提交绑定' : this.selCard1 == 1 ? '查询' : ''
			// 	}
			// },
			sList() {
				if (this.schCount == 0 && !this.isMore) {
					return this.schoolList = []
				}
				if (this.schCount <= 10 && !this.isMore) {
					return this.schoolList
				}
				if (this.schCount > 10 && !this.isMore) {
					return this.schoolList
				}
				if (this.schCount > 10 && this.isMore) {
					return this.schoolList
				}
			}
		},
		watch: {},
		methods: {
			handleChangePupop() {
				this.$refs.popupOrg.showPopup = !this.$refs.popupOrg.showPopup
			},
			async _getRedPacketHandle() {
				this.opening = true
				let s_userId = uni.getStorageSync("s_userId");
				const result = await queryStudentCardBalance({
					userId: s_userId,
					bindType: '0'
				})
				if (result.code != 0) {
					_showToast('数据获取失败，请稍后重试')
					return
				}
				const profile = this.profile = result.data.students[0].students[0];
				const redPacket = await grabRedPacket({
					orgId: profile.orgId,
					empId: profile.empId
				})
				setTimeout(() => {
					this.opening = false
					if (redPacket.code == 0) {
						uni.hideLoading()
						this.showRedPacket = false
						uni.navigateTo({
							url: '../../pageMassage/myRedPacket/redPacketDetails' //'../../pageMassage/myRedPacket/redPacketDetails?dept=' + JSON.stringify(this.dept)
						})
					} else {
						uni.hideLoading()
						_showToast('数据获取失败，' + redPacket.msg)
					}
				}, 2000)
			},
			cancel2() {
				console.log("点了没")
				// this.showMcModal2 = false
			},
			_queryStudentCardBalance() {
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					bindType: 0
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						this.userList = res.data.students
					} else {
						this.userList = []
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			jiebang(value) {
				if (this.cardNo1 == undefined) {
					uni.showToast({
						title: '请选择卡号'
					})
				} else {
					this.content2 = 'xxxxx'
					this.title2 = '请输入卡密码完成绑定'
					this.showMcModal2 = true
				}
			},
			getCardNo(cardNo) {
				this.cardNo1 = cardNo
				// if(this.orgId == 4514061 || this.profile.orgId == 4514061) this.showRedPacket = true
			},
			jumpCard(cardNo) {
				this.cardNo1 = cardNo
				// uni.navigateTo({
				// 	url: '/packageCard/card/danganCard?arrObj=' + encodeURIComponent(JSON.stringify(arr)) + '&empName=' + empName
				// })
			},
			radioChange(evt) {
				this.selCard = evt.target.value
				this.orgName = ''
				this.orgId = ''
				this.empName = ''
				this.sfzCode = ''
				this.isClick = false
				this.$refs.popupOrg.clearItem()
				this.isListShow = true
			},
			radioChange1(evt) {
				this.selCard1 = evt.target.value
				this.orgName = ''
				this.orgId = ''
				this.empName = ''
				this.sfzCode = ''
				this.$refs.popupOrg.clearItem()
				this.isListShow = true
			},
			bb() {
				this.showMcModal = false
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			cc() {
				this.showMcModal = false
				if (this.isSwitch) {
					uni.navigateBack()
				} else {
					uni.navigateTo({
						url: '/pages/me/paySetting'
					})
				}
			},
			cancel() {
				console.log("这里")
				// this.showMcModal1 = false
			},
			queren() {
				console.log("这里")
				// this.showMcModal1 = false
			},
			changeTab(obj) {
				this.activeIndex = obj.activeIndex
				this.orgName = ''
				this.orgId = ''
				this.userList = []
				this.isListShow = true
				this.cardNo = ''
				this.cardPwd = ''
				this.sfzCode = ''
				this.empName = ''
				this.isClick1 = false
				this.isClick = false
				this.$refs.popupOrg.clearItem()
				if (this.activeIndex == 0) {
					this.selCard = 1
				} else if (this.activeIndex == 1) {
					this.selCard1 = 1
				}
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			pad(num, n) {
				var len = num.length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				this.cardNo = num;
				return num;
			},
			carNoLen() {
				this.cardNo = this.cardNo.replace(/\s*/g, "")
				if (this.cardNo.length == 0) {
					return
				} else if (this.cardNo.length < 8) {
					_showToast('卡号不足8位系统将自动补足')
					this.pad(this.cardNo, 8)
				}
			},
			toCancel() {
				console.log("这里")
				this.isValue = false
			},
			toBind() {
				if (!this.flag) {
					this.idCard = ""
					this.orgName = ""
					this.empName = ""
					this.flag = true
				} else {
					this._selectCardInfoByIdCardNo(this.idCard, this.orgId, this.empName)
				}
			},
			_toBind() {
				let s_userId = uni.getStorageSync('s_userId')
				if (this.orgId == '') {
					_showToast('请选择机构')
				} else if (this.cardNo == '') {
					_showToast('请输入个人卡号~')
				} else if (this.cardPwd == '') {
					_showToast('请输入卡密码~')
				} else {
					_showLoading('绑定中,请稍后...')
					bindEmp({
						orgId: this.orgId,
						cardNo: this.cardNo,
						empName: this.empName,
						userId: s_userId,
						cardPwd: this.cardPwd,
						bindType: this.activeIndex == 0 ? 0 : 1
					}).then(res => {
						if (res.resultCode == 0) {
							uni.hideLoading()
							this.title = '温馨提示'
							this.content = '绑卡成功'
							this.okBtn = '确认'
							this.isSwitch = true
							this.showMcModal = true
							// }
						} else {
							uni.hideLoading()
							this.title1 = '操作失败'
							this.content1 = res.resultMsg
							this.showMcModal1 = true
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
			},
			_selectCardInfoByIdCardNo(idCardNo, orgId, empName) {
				if (!empName) {
					_showToast('请填写姓名')
					return
				}
				if (idCardNo == "" || idCardNo == null) {
					_showToast('请填写本人身份证号码！')
					return
				}
				if (!this.isBlank) {
					if (!orgId) {
						_showToast('请选择机构')
						return
					}
				}
				this.flag = false
				_showLoading('查询中,请稍后...')
				selectCardInfoByIdCardNo({
					idCardNo,
					orgId,
					empName
				}).then(res => {
					if (res.code == 0) {
						this.isListShow = false
						this.userList = res.data.map(item => {
							item = {
								...item,
								orgName: this.orgName
							}
							return item
						})
						if (this.activeIndex == 1) {
							this.isClick1 = true
						} else {
							this.isClick = true
						}
						this.showOrg1 = true
					} else {
						uni.showModal({
							title: '温馨提示',
							content: `${res.msg}`,
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					this.isListShow = true
					uni.hideLoading()
					console.log(err)
				})
			},
			cliName(obj) {
				this.orgId = parseInt(obj.orgId);
				this.orgName = obj.orgName;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.c_container {
		height: 100%;

		.b_header {
			width: 100vw;
			height: 350rpx;
			background-image: url('');
			background-size: 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
			position: relative;

			.qh_box {
				display: flex;
				justify-content: center;
				align-items: center;
				// background: linear-gradient(180deg, #F9FCFF 0%, #EDEFFF 100%);
				color: #FFF;
				font-size: 32rpx;
				border-radius: 8px 8px 0px 0px;
				width: 80%;
				height: 120rpx;
				position: absolute;
				bottom: 0;
				padding: 40rpx;

				.q_box {
					display: flex;
					flex-direction: row;

					.b_name {
						font-size: 28rpx;
						font-family: "PingFang-SC-Medium, PingFang-SC";
						font-weight: 500;
						color: #6B707A;
					}

					.b_name_txt {
						font-size: 28rpx;
						font-family: "PingFangSC-Semibold, PingFang SC";
						font-weight: 600;
						color: #3C424F;
					}
				}
			}
		}

		.bac_box {
			width: 100%;
			height: 20rpx;
			// background-color: #185AFF;
		}

		.in_boxs {
			border-radius: 16rpx 16rpx 0px 0px;
			padding: 30rpx 50rpx;
			display: flex;
			flex: 1;
			background-color: #FFFFFF;

			.input_box {
				width: 100%;

				.in_box {
					display: flex;
					// flex-direction: row;
					align-items: center;
					padding: 0 20rpx;
					height: 84rpx;
					margin-bottom: 20rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1px solid #E6E6E6;
					box-sizing: border-box;

					.orgTxt {
						font-size: 28rpx;
						font-weight: 500;
						color: #444444;
						width: 100rpx;
						text-align: justify;
						text-align-last: justify;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.secletInput {
						width: calc(100% - 115rpx);
						height: 100%;
						display: flex;
						align-items: center;

						.selectValue {
							width: 100%;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-size: 28rpx;
							font-weight: 500;
							color: #ADADAD;
						}

						.active {
							color: #000;
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.btn_box {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 30rpx;
			left: 0;
			width: 100%;

			.btn_pri {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				width: 90%;
				font-size: 32rpx;
				font-family: "PingFangSC-Heavy, PingFang SC";
				font-weight: 600;
				color: #FFFFFF;
				background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
				box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
				border-radius: 8rpx;
			}
		}
	}

	.pwd-view {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 85%;
	}

	.account-txt {
		font-size: 28rpx;
		font-weight: 500;
		color: #ADADAD;
	}

	.in_box:last-child {
		margin: 0;
	}

	.eye_icon {
		width: 18px;
		height: 18px;
	}


	.selectBox {
		display: flex;
		// flex: 1;
		justify-content: center;
		align-items: center;
	}

	.selectBox:last-child {
		margin-right: 0;
	}

	// .orgTxt text {
	// 	display: inline-block;
	// 	width: 100%;
	// 	height: 0;
	// }

	.selectTxt {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.down_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 199;

		.popup_mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}

		.popup-content {
			height: 90%;
			width: 100%;
			display: flex;
			position: absolute;
			bottom: 0;
			flex-direction: column;
			background-color: #FFF;
			border-top-right-radius: 36upx;
			border-top-left-radius: 36upx;
		}

		.search_input {
			height: 40rpx;
			padding: 30rpx 20rpx;
			border-bottom: 1px #f5f5f5 solid;
		}

		.schoolList {
			width: 100%;
			height: calc(100% - 300rpx);
		}

		.item {
			padding: 0 24upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}

	.sel_box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		padding-bottom: 20rpx;
	}

	.lab_txt {
		display: flex;
		flex: 1;
		padding-left: 20rpx;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.radio_box {
		display: flex;
		flex: 2.5;
		justify-content: space-between;
		align-items: center;
	}

	.radioTxt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}

	.red_packet_box {
		height: 350rpx;
		width: 250rpx;
		border-radius: 12rpx;
		background-color: #e54716;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&.getRedpacket {
			background-color: #df8b8b;

			.red_packet_top {
				background-color: #ffe4e5;
				box-shadow: inset 0px 0px 4px 0px #822b10;
			}
		}
	}

	.red_packet_top {
		position: absolute;
		top: -500rpx;
		height: 600rpx;
		width: 600rpx;
		border-radius: 50%;
		box-shadow: 0px 0px 4px 0px #822b10;
	}

	.red_packet_gold {
		position: absolute;
		bottom: -35rpx;
		left: 50%;
		margin-left: -35rpx;
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
		background-color: #eac866;
		box-shadow: 0px 1px 2px 0px #846a00;
		text-align: center;
		line-height: 70rpx;
		color: #574700;
		font-size: 26rpx;

		&.opening {
			animation: open_red_packet 2s infinite;
		}
	}

	@keyframes open_red_packet {
		0% {
			transform: rotateY(0deg);
		}

		100% {
			transform: rotateY(720deg);
		}
	}

	.red_packet {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;

		&.show_red_packet {
			display: block;
		}

		.red_packet_mask {
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.4)
		}

		.red_packet_box.big_box {
			height: 800rpx;
			width: 486rpx;
			position: absolute;
			top: 140rpx;
			left: 50%;
			margin-left: -243rpx;

			// ********* new ********
			.packet_box_bg {
				height: 800rpx;
				width: 486rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.red_packet_gold {
				bottom: 110rpx;
				left: 50%;
				margin-left: -80rpx;
				height: 140rpx;
				width: 140rpx;
				line-height: 140rpx;
				color: #574700;
				font-size: 50rpx;
			}

			// ******** new *********
			.red_packet_top {
				top: -1200rpx;
				height: 1400rpx;
				width: 1400rpx;

				.red_packet_gold {
					bottom: -80rpx;
					left: 50%;
					margin-left: -80rpx;
					height: 160rpx;
					width: 160rpx;
					line-height: 160rpx;
					color: #574700;
					font-size: 60rpx;
				}
			}

			.red_packet_info {
				font-size: 40rpx;
			}

			.red_packet_sender {
				padding: 36rpx 0;
				font-size: 30rpx;
				color: #eac866;
			}
		}

		.close_icon {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			left: 50%;
			margin-left: -32rpx;
			bottom: 360rpx;
			transform: rotate(45deg);

			.icon {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>